<template>
  <div class="lx-index__page">
    <!-- 封面 -->
    <div class="friend-head flex flex--c">
      <h1 class="head-font">友人帐</h1>
    </div>
    <div class="main-box">
      <apply-form />
      <my-web-info />
      <hr class="hr-line--g" />
      <card-list />
    </div>
  </div>
</template>
<script lang="ts" setup>
import ApplyForm from "./ApplyForm";
import MyWebInfo from "./MyWeb";
import CardList from "./CardList";
</script>
<style lang="scss" scoped>
.lx-index__page {
  min-height: 100%;
  background-color: orange;
  padding: 20px 0;
  background: url("http://img.xjlyh.site/2023/09/24/ddd9c498a37f47f2b228b36ed11c5a27.png");
  background-size: 100% 100%;
  .friend-head {
    height: 300px;
    position: relative;
    .head-font {
      color: #fff;
      z-index: 10;
      font-weight: 700;
      font-size: 45px;
    }
    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      content: "";
    }
  }

  .main-box {
    max-width: 1200px;
    margin: 40px auto;
    border-radius: 10px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.85);
  }
}
</style>
